<template>
  <div class="spuMenu">
    <nut-cell-group>
      <nut-cell
        v-if="spuInfo.hasSaleAttrs"
        is-link
        title="选择规格"
        @click="emits('openSkuDialog')"
      >
        <template #title>
          <div class="skuAttrValue">
            <span
              v-for="(
                attrValue, attrValueIndex
              ) in currentSkuInfo.attrValueList"
              :key="attrValueIndex"
            >
              {{ attrValue }}
            </span>
          </div>
        </template>
        <template #icon>
          <img src="@/assets/product/integral.png" />
        </template>
      </nut-cell>
      <nut-cell
        is-link
        :title="deliveryAddress.selectedTitle"
        @click="emits('openAddressDialog')"
      >
        <template #icon>
          <img src="@/assets/product/address.png" />
        </template>
      </nut-cell>
    </nut-cell-group>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

// 属性
const props = defineProps({
  currentSkuInfo: {
    type: Object,
  },
  spuInfo: {
    type: Object,
  },
  deliveryAddress: {
    type: Object,
  },
});

// 方法
const emits = defineEmits(["openSkuDialog", "openAddressDialog"]);
</script>

<style lang="less" scoped>
.spuMenu {
  margin-top: 5px;
  padding: 0px 5px;
  img {
    width: 20px;
    height: 20px;
    margin-right: 2px;
  }
  .skuAttrValue {
    display: flex;
    span {
      margin-right: 5px;
      font-size: 12px;
      border: 1px solid #efefef;
      padding: 2px 5px;
      border-radius: 5px;
    }
  }
  :deep(.nut-cell__title) {
    font-size: 13px;
  }
  :deep(.nut-cell-group__wrap) {
    margin: 0px;
  }
  :deep(.nut-cell) {
    padding: 13px 8px;
  }
}
</style>